<template>
<div class="layout-wrapper">
  <div class="layout-topbar" ref="toolbarRef">
    <div class="layout-topbar-inner">
      <div>
        <Button icon="pi pi-bars" variant="text" rounded aria-label="Filter" v-styleclass="{selector: '.layout-sidebar', enterFromClass: 'hidden', enterActiveClass: 'sidebar-slide-wide', leaveToClass: 'hidden', leaveActiveClass: 'sidebar-slide-thin'}" />
        <Button as="router-link" icon="pi pi-home" variant="text" rounded aria-label="Filter" to="/" />
        <Button icon="pi pi-arrow-left" variant="text" rounded aria-label="Filter" @click="router.go(-1)" />
      </div>
    </div>
  </div>
  <div class="layout-content">
      <Menu class="layout-sidebar hidden" :active="false"></Menu>
      <div class="layout-content-slot">
        <router-view></router-view>
      </div>
  </div>
  <div class="layout-footer">
    测试、学习、调查、进步
  </div>
</div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, useTemplateRef } from 'vue'
import Menu from '@/components/index/menu.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

let scrollListener: (() => void) | null
const toolBar = useTemplateRef('toolbarRef')
const bindScrollListener = () => {
  if (!scrollListener) {
    if (toolBar) {
      scrollListener = () => {
        if (window.scrollY > 0) toolBar.value!.classList.add('layout-topbar-sticky');
        else toolBar.value!.classList.remove('layout-topbar-sticky');
      };
    }
  }

  window.addEventListener('scroll', scrollListener!);
}
const unbindScrollListener = () => {
  if (scrollListener) {
    window.removeEventListener('scroll', scrollListener);
    scrollListener = null;
  }
}
onMounted(() => {
  bindScrollListener()
})
onBeforeUnmount(() => {
  if (scrollListener)  unbindScrollListener();
})
</script>

<style scoped lang="sass">

</style>
